 <html>
	<head>
		<meta charset="UTF-8" />
		<title>照片墙</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
	<style>
	#send-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  background:#06AD97;
  border: 0;
  border-radius: 5px;
  padding: 10px 30px 10px 20px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
}

button svg {
  display: inline-block;
  vertical-align: middle;
  padding-right: 5px;
}

button:hover svg {
  animation: fly 2s ease 1;
}

@keyframes fly {
  0% {
    transform: translateX(0%);
  }

  50% {
    transform: translateX(300%);
  }

  100% {
    transform: translateX(0);
  }
}
	</style>
    </head>
	<body>
    
		 
		<ul class="polaroids">
			<li><a href="#"  ><img src="images/11.jpg" alt="Roeland!"></a></li>
			<li><a href="#" ><img src="images/21.jpg" alt="Discussion"></a></li>
			<li><a href="#" ><img src="images/12.jpg" alt="A Hearty Laugh"></a></li>
			<li><a href="#"  ><img src="images/22.jpg" alt="Evil Matt Coding"></a></li>
			<li><a href="#" ><img src="images/13.jpg" alt="Scribbles"></a></li>
			<li><a href="#"  ><img src="images/23.jpg" alt="Amanda Glares..."></a></li>
			<li><a href="#"  ><img src="images/14.jpg" alt="The Dougernaut"></a></li>
			<li><a href="#" ><img src="images/24.jpg" alt="I See You!"></a></li>
			 
		</ul>
		<ul class="polaroids" style="width:280px;">
		  <li><a href="#"  ><img src="images/15.jpg" alt="Roeland!"></a></li>
			<li><a href="#"  ><img src="images/16.jpg" alt="Discussion"></a></li>
			<li class="messy"><a href="#" ><img src="images/25.jpg" alt="A Hearty Laugh"></a></li>
		</ul>
        <div id="send-btn">
  <button>
    
   <a href="../index.html"> 返回</a>
  </button>
</div>
	</body>
</html>